﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mfShowVehicleDetail.aspx.cs" Inherits="msBsc.WebUi.mfShowVehicleDetail" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <%=getMeta()%>
    <link rel="stylesheet" type="text/css" href="/themes/mStyle1/mGlobal.css" charset="gbk" />
    <link rel="stylesheet" type="text/css" href="/themes/mStyle1/css/public/mLogin.css" charset="gbk" />
    <%=getBodyBeforeJs()%>
    <script src="/??jqPlugin/js/jquery-1.8.3.min.js,js/jBase.js,js/jmPage.js,themes/Style1/jsQt.js,jqPlugin/js/laytpl.js"
        type="text/javascript"></script>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

            body * {
                margin: 0;
                padding: 0;
            }

        .mbWrap {
            max-width: 840px;
            min-width: 300px;
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }

        #imgVehicleDefault {
            width: 100%;
            z-index: 9;
        }

        #imgDjackPic {
            width: 21%;
            border: 2px solid #fff;
            border-radius: 50%;
            position: absolute;
            z-index: 10;
            right: 20px;
        }

        .showContent {
            width: 100%;
            padding: 20px 8% 0 8%;
        }

        #vehicleName {
            font-family: 微软雅黑;
            font-size: 22px;
            color: #060707;
        }

        #mbType {
            font-family: 微软雅黑;
            font-size: 16px;
            color: #403f3f;
            line-height: 35px;
        }

        #mbPrice {
            font-family: 微软雅黑;
            font-size: 26px;
            color: #1a9bf2;
            line-height: 40px;
        }

            #mbPrice span {
                font-size: 16px;
            }

        #mbBrandSeats, #serviceType, #serviceArea, #vehicleNum {
            font-family: 微软雅黑;
            font-size: 17px;
            color: #323232;
            line-height: 30px;
        }

        .cardItems {
            margin: 20px 0;
            width: 100%;
            border: 1px solid #858585;
            border-radius: 5px;
            float: left;
        }

            .cardItems span {
                display: block;
                float: left;
                width: 33.3%;
                line-height: 60px;
                text-align: center;
                font-family: 微软雅黑;
                color: #6a6f75;
                font-size: 20px;
            }

        .cardSelected {
            background-color: #1a9bf2;
            color: #fff !important;
        }

        .lrLine {
            border: 1px solid #858585;
            border-bottom: 0;
            border-top: 0;
        }

        .ShowBuyShouldKnow, .evlutionContent, .userInfoContent {
            width: 100%;
            word-break: break-all;
            word-wrap: break-word;
            color: #6a6f75;
            line-height: 25px;
            font-size: 16px;
            text-indent: 32px;
            margin-bottom: 60px;
        }

        .evlutionContent, .userInfoContent {
            text-indent: 0;
            display: none;
        }

        .evlutionItems {
            clear: both;
        }

        .evlutionTitle {
            width: 100%;
            padding: 0;
        }

            .evlutionTitle img {
                width: 50px;
                height: 50px;
                vertical-align: middle;
                float: left;
                margin-right: 15px;
            }

        .ENickName {
            font-family: 微软雅黑;
            font-size: 17px;
            color: #323232;
        }

        .ETime {
            font-family: 微软雅黑;
            font-size: 13px;
            color: #969698;
        }

        .evContent {
            width: 100%;
            word-break: break-all;
            word-wrap: break-word;
            overflow: hidden;
            font-family: 微软雅黑;
            font-size: 17px;
            color: #323232;
        }

        .content-pic ul li {
            float: left;
            margin-right: 5px;
            width: 20%;
        }

            .content-pic ul li img {
                width: 100%;
                max-width: 130px;
                min-width: 50px;
            }

        .userInfoContent p {
            line-height: 30px;
        }
    </style>

    <script type="text/javascript">
        function changeHeadPosition() {
            var w = $("#imgDjackPic").height() / 4;
            var h = parseInt(w) * 3;
            $("#imgDjackPic").css("bottom", "-" + h + "px");
        }
    </script>
</head>
<body>
    <input type="hidden" id="hidDjackId" value="" />
    <div class="mbWrap">
        <div style="position: relative">
            <img src="/themes/mStyle1/Image/mbDjack/vehicleDefault.jpg" id="imgVehicleDefault" />
            <img src="/themes/mStyle1/Image/mbDjack/vehicleDefault.jpg" onload="javascript:changeHeadPosition()" id="imgDjackPic" />
        </div>
        <div class="showContent">
            <p id="vehicleName">车辆名称标题</p>
            <p id="mbPrice">
                ￥<label>300</label>
                <span>天/起</span>
            </p>
            <p id="mbBrandSeats">大众 | 5座</p>
            <p id="serviceType">服务类型：专职司机</p>
            <p id="serviceArea">服务范围：重庆全市，主城区，各大区县</p>
            <p id="vehicleNum">车辆编号：FMW563</p>
            <div class="cardItems">
                <span class="cardSelected">购买须知</span>
                <span class="lrLine">服务评价</span>
                <span id="conaction">联系车主</span>
            </div>
            <div class="items_content">
                <div class="ShowBuyShouldKnow check_content1">
                    包含车辆费，司机费，油费，停车费。除此之外另行支付，此次服务仅限济州市区，此款车型为现代Grand Starex可乘坐1~11人（如携带行李建议乘坐1~5人较为合适）,接机时间为韩国当地时间：07:00~23:00 如因航班推迟或有变动请提前与我们通知，谢谢。3天前可额退款，2天前退款全部金额的50%，提前一天或当天不给予退款，请见谅。
                </div>
                <div class="evlutionContent check_content2">
                    <div class="evlutionItems">
                        <div class="evlutionTitle">
                            <img src="/themes/mStyle1/Image/mbDjack/evlutionHead.jpg" class="eHeadPic" />
                            <span class="ETitleTxt">
                                <span class="ENickName">我是地接客</span>
                                <br />
                                <span class="ETime">2015-01-27 11:31</span>
                            </span>
                        </div>
                        <div class="evContent">
                            <div class="content-text">
                                很好！带我们去了很多其他的地方！很好！带我们去
了很多其他的地方！
                            </div>
                            <div class="content-pic">
                                <ul>
                                    <li>
                                        <img src="/themes/mStyle1/Image/mbDjack/pic1.jpg" /></li>
                                    <li>
                                        <img src="/themes/mStyle1/Image/mbDjack/pic2.jpg" /></li>
                                    <li>
                                        <img src="/themes/mStyle1/Image/mbDjack/pic3.jpg" /></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="userInfoContent check_content3">
                    <p>电话:<label id="labPhone">15808054185</label></p>
                    <p>邮箱:<label id="labEmail">812470657@qq.com</label></p>
                    <p>Q  Q:<label id="labQQ">812470657</label></p>
                    <p>微信:<label id="labWechat">812470657</label></p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        jQuery(window).resize(function () {
            changeHeadPosition();
        })

        $(function () {
            ChangeSelectItem();

            $("#conaction").click(function () {
                showConaction();
            })
        })

        function ChangeSelectItem() {
            $(".cardItems span").click(function () {
                $(this).addClass("cardSelected").siblings().removeClass("cardSelected");
                var showIndex = $(this).index() + 1;

                var showClass = ".items_content > .check_content" + showIndex;
                $(showClass).show().siblings().hide();
            })
        }

        function showConaction() {
            btnDo("ShowConaction");
        }

        function btnDo(sEbtn) {
            var _jsParam = new jsonRow();
            if (sEbtn == "GetVehicleDetail") {
                _jsParam.AddCell("ACTION", "GetVehicleDetail");
                _jsParam.AddCell("VehicleId", GetQueryStr("VehicleId"));
                _jsParam.AddCell("currentUrl", window.location.href);
                ajaxComm(_jsParam);
            }
            else if (sEbtn == "ShowConaction") {
                _jsParam.AddCell("ACTION", "ShowConaction");
                _jsParam.AddCell("DjackId", $("#hidDjackId").val());
                ajaxComm(_jsParam);
            }
        };
        btnDo("GetVehicleDetail");
    </script>
</body>



</html>
